<template>
  <div class="add-pre">
    <vx-title-bar :list="['添加角色录入', '添加角色确认', '添加角色结果']" current="1" />
    <!-- 新增信息 start -->
    <ui-form ref="form" :rules="rules" label-width="150px" class="vx-form" label-position="right" :model="form">
      <ui-form-item label="角色名称" prop="name">
        <ui-input type="text" placeholder="请输入角色名称" v-model="form.name"> </ui-input>
      </ui-form-item>
      <ui-form-item label="菜单权限">
        <ui-tree
          v-loading="showTrueLoading"
          ref="tree"
          :data="menulist"
          default-expand-all
          show-checkbox
          check-on-click-node
          node-key="id"
          :default-checked-keys="checkedKeys"
          :props="defaultProps"
          @check-change="handleNodeClick"
          @check="check"
        >
        </ui-tree>
      </ui-form-item>
      <ui-form-item label=" ">
        <ui-button class="default-btn" @click="$router.go(-1)">返回</ui-button>
        <ui-button class="primary-long-btn" @click="confirmTrue">确认</ui-button>
      </ui-form-item>
    </ui-form>
    <!-- 新增信息 end -->
  </div>
</template>
<script>
import roleApi from '@/api/role.js';
let str = ''; //选中的授权列表上送参数必须是字符串
export default {
  name: 'add-pre',
  data() {
    return {
      form: {},
      // 表单校验规则
      rules: {
        name: { required: true, message: '请输入角色名称', trigger: ['change', 'blur'] },
      },
      showTrueLoading: false,
      menulist: [], //菜单授权列表
      checkedKeyssss: [],
      checkedKeys: [], //已授权的菜单列表
      defaultProps: {
        //树形组件绑定的属性
        children: 'children',
        label: 'name',
      },
    };
  },
  beforeRouteEnter(to, from, next) {
    //  如有从其他页面跳转进来则修改此处
    next((vm) => {
      if (from.path === '/system/role/add/add-conf') {
        vm.menulist = vm.getData().menulist;
        vm.form = vm.getData().form;
        vm.checkedKeys = (vm.getData() && vm.getData().checkedKeys) || [];
        vm.checkedKeyssss = (vm.getData() && vm.getData().checkedKeys) || [];
      }
    });
  },
  async created() {
    /**
     * 查询所有菜单
     */
    try {
      this.showTrueLoading = true;
      const res = await roleApi.selectAllMenu();
      this.menulist = res.data;
    } finally {
      this.showTrueLoading = false;
    }
  },
  methods: {
    handleNodeClick(item, check) {
      if (check) {
        this.checkedKeys.push(item.id);
      } else {
        if (this.checkedKeys.indexOf(item.id) !== -1) {
          this.checkedKeys.splice(this.checkedKeys.indexOf(item.id), 1);
        }
      }
    },

    check(checkedNodes, checkedKeys) {
      this.checkedKeyssss = checkedKeys.checkedKeys.concat(checkedKeys.halfCheckedKeys);
    },

    /**
     * 菜单授权
     */
    async confirmTrue() {
      this.$refs['form'].validate(async (valid) => {
        // 表单校验通过
        if (valid) {
          str = this.checkedKeyssss.join(',');
          if (str !== '') {
            this.setData({
              form: this.form,
              menuIds: str,
              menulist: this.menulist,
              checkedKeys: this.checkedKeyssss,
              checkedKeyss: this.checkedKeys,
            });
            this.$router.push({
              path: '/system/role/add/add-conf',
            });
          } else {
            this.$message.error('至少选择一个菜单权限');
          }
        } else {
          this.$nextTick(() => {
            document.querySelectorAll('.is-error')[0].querySelector('input').focus();
          });
        }
      });
    },
  },
};
</script>
